import React, { Component } from 'react'

export class App extends Component {
  constructor(props) {
    super()
    this.state = {
      message: 'hello word',
      counter: 0
    }
  }
  changeText () {
    // 1.基本使用
    /* this.setState({
        message: '李天一'
    }) */
    // 2.setState 传入回调函数
    // 1.可以在回调函数中编写新的state的逻辑
    // 2.当前的回调函数会将之前的state 和props 传递过来
    /* this.setState((state, props) => {
      // 1.编写一些对state 的处理逻辑
      // 2.可以获取之前的state props 值
      console.log(state.message, props);
      return {
        message: '你好 李银河'
      }
    }) */
    // 3. setState 在react 的事件处理中是一个异步操作
    // this.setState({ message: '你好 李银河' })
    // console.log('------', this.state.message) //hello word
    // 3.1 如果想在数据更新之后，获取到对应结果执行一些逻辑代码，可以在setState传入第二个参数
    // this.setState({ message: "hello 李银河" }, () => {
    //   console.log('------', this.state.message) //hello 李银河
    // })
    // setState 一步  1.优化性能 合并多个setState 仅进行一次render更新 2. 保持 state 和props 数据保持同步
  }
  increment () {

  }
  render () {
    const { message, counter } = this.state
    return (
      <div>
        <p>App</p>
        <h2>message:{message}</h2>
        <button onClick={() => this.changeText()}>修改文本</button>
        <h2>当前计数：{counter}</h2>
        <button onClick={() => this.increment()}>
          计数
        </button>
      </div>
    )
  }
}

export default App